<template>
    <div class="studyTime">
        <Header :bigDataTitle="bigDataTitle" @openMenu="openMenu" @navback="navback" />
        <p class="selectCountp">{{companyName}}
            <!--<span class="iconshuju_icon_xiala iconfont"></span>-->
            <!--<mu-select  v-model="normal.value" @change="changeValue">-->
                <!--<mu-option v-for="(item,index) in orgArray" :key="index" :label="item.name" :value="item.id"></mu-option>-->
            <!--</mu-select>-->
        </p>
        <div class="timer-picker" @click.stop="showS">
            <span>{{startTime}} — {{endTime}}</span><b class="iconfont iconshuju_icon_rili"></b>
            <!--<mu-date-input v-model="value1" type="date" container="dialog"  ></mu-date-input>-->

            <!--<mu-date-input v-model="value2" type="date" container="dialog" @change="changeValue" ></mu-date-input>-->
            <!--<mu-paper :z-depth="1" class="demo-date-picker" ref="datePicker1">-->
                <!--<mu-date-picker :date.sync="date1"></mu-date-picker>-->
            <!--</mu-paper>-->
            <!--<mu-paper :z-depth="1" class="demo-date-picker" ref="datePicker2">-->
                <!--<mu-date-picker :date.sync="date2"></mu-date-picker>-->
            <!--</mu-paper>-->
        </div>
        <transition name="bounce">
             <Range-time @selectIndex="selectIndex" v-if="showSelect" />
        </transition>
        <div>
            <div class="noData"  v-show="noData">
                <span>暂无数据</span>
            </div>
            <div  id="studyTime" v-show="!noData"></div>
        </div>

    </div>
</template>
<script>
    import Header from  '@/views/home/components/header.vue';
    import {formatDateTime,GetMonday} from '../utils'
    import {mapState,mapMutations} from 'vuex';
    import RangeTime from  '@/views/home/components/rangeTime.vue';
    export default{
        data(){
            return{
                bigDataTitle:'学习时长',
                position: 'right',
                value1:'',
                value2:'',
                companyName:'',
                companyId:'',
                studyTimeArray:{},
                startTime:'',
                endTime:'',
                startTimeStamp:"",
                endTimeStamp:'',
                noData:false,
                showSelect:false,
                normal:{
                    value:''
                }
            }
        },
        computed:{
            ...mapState({
                open:state=>state.initHomeData.open.open,
                orgArray:state=>state.initHomeData.orgArray
            })
        },
        methods:{
            ...mapMutations(['openHomeMenu']),
            activeCalend(){
              this.date1=true;
            },
            openMenu(){
                console.log(123)
                this.openHomeMenu({
                    open:!this.open
                })
            },
            navback(){
                this.$router.go(-1);
            },
            changeValue(e){
                this.studyTimeArray={};
                this.orgArray.forEach((item,index)=>{
                    if(item.id==e){
                        this.companyName =item.name;
                    }
                })
                this.getData(e,this.startTimeStamp,this.endTimeStamp)
            },
            studyTime(){
                var studyTime=document.getElementById('studyTime');
                let myChart = this.$echarts.init(studyTime);
                var dataShadow = [];
                var yMax = 500;
                console.log(this.studyTimeArray)
                Object.keys(this.studyTimeArray).forEach((ele,index)=>{
                    dataShadow.push(this.studyTimeArray[ele].numbers)
                })
                let option = {
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data: ['小于0.5H', '0.5-1H', '1-2H', '大于2H'],
                            axisLine:{
                                show:false,
                                lineStyle:{
                                    color:'white',
                                    opacity:0.1
                                }
                            },
                            axisLabel:{
                                color:'white',
                            },
                            splitLine:{
                                show:false
                            }

                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            nameTextStyle:{
                                color:'white'
                            },
                            axisLabel:{
                                color:'white'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'white',
                                    opacity:0.1
                                }
                            }
                        }
                    ],
                    series : [

                        {
                            name:'直接访问',
                            type:'bar',
                            barWidth: '60%',
                            data:dataShadow,
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                bottom:'30',
                                textStyle: { //数值样式
                                    color: 'white',
                                    fontSize: 12
                                },
                                formatter: function (name) {
                                    console.log(name)
                                    return name.value+'人'
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        var colorList = ['#FFC63D','#00F0E7','#08BAE9','#0D65FC'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                             }
                        },
                    ]
                };
                myChart.setOption(option,true)
            },
            showS(){
                this.showSelect =!this.showSelect;
            },
            selectIndex(...data){
                this.showSelect =false;
                this.startTime =formatDateTime(data[0].startTime);
                this.endTime =formatDateTime(data[0].endTime);
                this.getData(JSON.parse(Cookies.get('user_71ydj')).organization_id,data[0].startTime,data[0].endTime)
            },
            getData(id,startTime,endTime){
                this.$http.get('/app/my/study_time_rank',{
                    organization_id:id,
                    start_time:startTime,
                    end_time:endTime
                }).then((res)=>{
                    console.log(res.data)
                    if(res.code=='200'){
                        if(Object.keys(res.data).length){
                            this.studyTimeArray =res.data;
                            this.studyTime();
                            this.noData=false;
                        }else{
                            this.noData=true;
//                            this.studyTimeArray={};
//                            this.studyTime();
                        }

                    }
                })
            }
        },
        components:{
            Header,
            RangeTime
        },
        mounted(){
            if(!Cookies.get('user_71ydj')){
                this.$router.push({
                    path:'/mine'
                })
                return false
            }
            this.$progress.done();
            this.endTime =formatDateTime(parseInt(+new Date().getTime()/1000));
            this.startTime =GetMonday((new Date()));
            this.startTimeStamp =parseInt(new Date(this.endTime).getTime()/1000);
            this.endTimeStamp =parseInt(new Date(this.startTime).getTime()/1000);
            this.getData(JSON.parse(Cookies.get('user_71ydj')).organization_id,this.startTimeStamp,this.endTimeStamp)
            this.companyName =JSON.parse(Cookies.get('user_71ydj')).organization;
            this.companyId =JSON.parse(Cookies.get('user_71ydj')).organization_id;

        }
    }
</script>
<style lang="scss" scoped="">
    @import '../base2';
    .studyTime /deep/{
        color: white;
        height: 100vh;
        .selectCountp{
            background: #183377;
            margin-top: 45px;
            position: relative;
            .mu-input{
                position: absolute;
                left: 0;
                top:0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
        }
        .timer-picker{
            height: 50px;
            background: rgba(0,0,0,0.1);
            text-align: center;
            line-height: 50px;
            margin: 0 -16px;
            position: relative;
            .mu-input{
                position: absolute;
                left: 0;
                top:0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            span{
                color: #08BAE9;
                font-size: 14px;
                display: inline-block;
                height: 100%;
                line-height: 50px;
                vertical-align: top;
            }
            b{
                color:#08BAE9 ;
                font-size: 14px;
                font-weight: normal;
                display: inline-block;
                height: 100%;
                line-height: 50px;
                vertical-align: top;
                margin-left: 4px;
            }
        }
        #studyTime{
            height: 554px;

        }
    }
    .noData{
        height:200px;
        position: relative;
        span{
            position: absolute;
            left: 0;
            top:0;
            right: 0;
            bottom: 0;
            margin: auto;
            font-size: 14px;
            color: white;
            width: 100%;
            height: 30px;
            text-align: center;
        }
    }
    .bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-out .5s;
    }
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }
    @keyframes bounce-out {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(0);
        }
    }
</style>